<template>
    <!-- 轮播图管理 -->
    <div class="bannerList">
      <div class="input">
        <el-form
        ref="formInlineRef"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
      <el-form-item prop="name" label="轮播图名称">
          <el-input
            v-model="formInline.name"
            placeholder="名称"
            clearable
          />
        </el-form-item>
        <el-form-item prop="createdTime" label="注册时间">
          <el-date-picker
            v-model="formInline.createdTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="getList()"
            >查询</el-button
          >
          <el-button @click="resetForm(formInlineRef)">清空</el-button>
        </el-form-item>
      </el-form>
      <el-button type="danger"  @click="bannerAdd()">添加轮播图</el-button>
  
      <div class="table" style="margin-top: 20px" 
      @selection-change="handleSelection">
        <el-table :data="tableData" stripe>
          <el-table-column prop="id" label="序号" width="100px" />
          <el-table-column prop="name" label="名称" width="280px" />
          <el-table-column prop="banner" label="轮播图" width="200px">
            <template #default="scope">
            <img
              :src="scope.row.banner"
              alt="图片资源错误"
              width="100"
              height="100"
            />
          </template>
          </el-table-column>
          <el-table-column prop="addres" label="跳转地址" width="250px" />
          <el-table-column prop="gmtCreate" label="添加时间" width="200px" />
          <el-table-column prop="sort" label="排序" width="100px" />
          <el-table-column label="操作" width="auto">
            <template #default="scope">
              <div class="buttons">
                <el-button
                  type="primary"
                  link
                  icon="CirclePlusFilled"
                  @click="bannerAdd()"
                >
                  添加
                </el-button>
                <el-button type="warning" link @click="toEdit(scope.row.id)"> 修改 </el-button>
                <el-button type="danger" link @click="del(scope.row.id)"> 删除 </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div style="margin-top: 20px" class="page">
        <el-config-provider :locale="locale">
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[5, 10, 15, 20]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="getList"
            @current-change="getList"
          >
          </el-pagination>
        </el-config-provider>
      </div>
    </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref ,reactive} from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import type { Action, FormInstance } from "element-plus";
  import { Search } from "@element-plus/icons-vue";
  import imgUrl from "../../assets/img/4.jpg";
  import { useRouter } from "vue-router";
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  import axios from "../../assets/js/axios";
  const router = useRouter();
  let locale = zhCn;
  const currentPage4 = ref(1);
  const pageSize4 = ref(5);
  const small = ref(false);
  const background = ref(true);
  const disabled = ref(false);
  const total = ref(0);
  
  const formInlineRef = ref<FormInstance>();
  //表单数据
  const formInline = reactive({
    name:"",
    banner: "",
    createdTime: "",
  });
  const tableData = ref([]);
  
  //表格选择的数据
  const selectData = ref<Array<any>>([]);
  //表格选择事件
  const handleSelection = (val: Array<any>) => {
    console.log(val);
    selectData.value = val.map((item) => item.id);
  };
  
  const bannerAdd = () => {
    router.push("/bannerAdd");
  };
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    //调用表单重置方法
    formEl.resetFields();
    formInline.name="",
    formInline.createdTime="",
    getList()
  };
  
  //点击删除
  const del = (id: number) => {
    //弹出消息提示弹窗
    ElMessageBox.alert("您确认删除吗？", "提示", {
      confirmButtonText: "确认",
      callback: (action: Action) => {
        console.log(action);
        if (action === "confirm") {
          axios
            .del("/serviceedu/edu-banner/delBanner/" + id, {})
            .then((res: any) => {
              if (res.code == 200) {
                ElMessage({
                  type: "success",
                  message: "删除角色成功",
                });
                getList();
              }
            });
        }
      },
    });
  };
  // 获取角色列表
  const getList = () => {
    axios
      .get("/serviceedu/edu-banner/getPageBatchs", {
        page: currentPage4.value,
        size: pageSize4.value,
        name: formInline.name,
        startDate: formInline.createdTime[0],
        endDate: formInline.createdTime[1],
      })
      .then((res: any) => {
        
        total.value = res.data.total;
        tableData.value = res.data.list;
      });
  };
  
  const toEdit = (id: number) => {
    //跳转用户添加页
    router.push({ path: "/bannerAdd", query: { id: id } });
  };
  getList();
  </script>
  
  <style scoped>
  .buttons {
    display: flex;
  }
  
  .imgUrl {
    width: 200px;
    height: 200px;
  }
  </style>
  